<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button to="/search" round icon="search">搜索</van-button>
      </template>
    </van-nav-bar>

    <!-- 频道 -->
    <div class="tabs-box">
      <van-tabs v-model="active">
        <van-tab v-for="item in ownList" :key="item.id" :title="item.name">
          <article-list :channel_id="item.id" />
        </van-tab>
      </van-tabs>

      <van-icon @click="sheetShow = true" class="open-icon" name="wap-nav" />
    </div>

    <!-- sheet -频道管理 -->
    <van-action-sheet v-model="sheetShow" title="频道管理">
      <!-- <ChannelEdit
        :ownList="ownList"
        :allList="allList"
        :value="active"
        @input="active = $event"
        @close="sheetShow = false"
      /> -->

      <!--
        v-model也可以用在组件上
        v-model的本质就是一个语法糖
          语法糖：一句代码编译时生成多数代码就叫语法糖
        所以v-model="active"这一句代码，生成了2句代码
          :value="active"
          @input="active = $event"

        严格来讲语法是
          v-model="变量"
          会生成
          :value="变量"
          @input="变量 = $event"
      -->
      <ChannelEdit
        :ownList="ownList"
        :allList="allList"
        v-model="active"
        @close="sheetShow = false"
        @add="ownList.push($event)"
        @del="del"
      />
    </van-action-sheet>
  </div>
</template>

<script>
// 导入接口
import { ownListAPI, allListAPI, resetChannelAPI } from '@/api/channel'
// 导入组件
import ArticleList from './ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
export default {
  name: 'MyHome',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      active: 0,
      ownList: [],
      allList: [],
      sheetShow: false
    }
  },
  destroyed () {
    console.log('home销毁了')
  },
  methods: {
    del (obj) {
      // 删除
      this.ownList = this.ownList.filter(v => v.id !== obj.id)
      // 优化下标 -- 思想：删除的如果是当前高亮前面的，就要让高亮的下标-1
      if (obj.index < this.active) {
        this.active--
      }
    }
  },
  async created () {
    // if (this.$store.state.user.tokenObj.token) {
    //   // 获取自己频道 -- 相当于永远都是发请求
    //   const res1 = await ownListAPI()
    //   this.ownList = res1.data.channels
    // } else {
    //   // 没有登录
    //   const list = JSON.parse(localStorage.getItem('hmtt97-channel'))
    //   if (list) {
    //     this.ownList = list
    //   } else {
    //     const res1 = await ownListAPI()
    //     this.ownList = res1.data.channels
    //   }
    // }

    // 先获取本地存储
    const list = JSON.parse(localStorage.getItem('hmtt97-channel'))
    // 要么登录了，要么本地存储没有值，那都是发请求
    if (this.$store.state.user.tokenObj.token || !list) {
      const res1 = await ownListAPI()
      this.ownList = res1.data.channels
    } else {
      // 否则就是从本地存储取出来
      this.ownList = list
    }

    // 获取所有频道
    const res2 = await allListAPI()
    this.allList = res2.data.channels
  },

  watch: {
    async ownList () {
      // 发请求或者存到本地
      // 根据有没有登录---有没有token
      if (this.$store.state.user.tokenObj.token) {
        // 得到一个新数组
        const channels = this.ownList.map((v, i) => {
          return { id: v.id, seq: i }
        })
        // 发请求
        await resetChannelAPI({
          channels
        })
      } else {
        // 没登录 - 存到本地
        localStorage.setItem('hmtt97-channel', JSON.stringify(this.ownList))
      }
    }
  }
}
</script>

<style scoped lang="less">
.van-nav-bar {
  .logo {
    width: 120px;
    height: 100%;
    background: url(@/assets/logo.png) no-repeat center / contain;
  }

  .van-button {
    width: 100px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    .van-icon-search {
      color: #fff;
    }
  }
}

.tabs-box {
  position: relative;

  .van-tabs {
    width: 345px;
  }

  .open-icon {
    position: absolute;
    right: 0px;
    top: 5px;
    font-size: 30px;
    background-color: #fff;
  }
}
</style>
